<template>
	<view class="flex-col page">
		<scroll-view scroll-y="true" class="scroll">
			<view class="flex-col group">
				<view class="flex-col group_1">
					<view class="flex-col section_1">
						<view class="flex-row">
							<image
								src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b14c62d02982001153329a/16557867941336379202.png"
								class="image_1" />
							<text class="text_1">装修档次</text>
						</view>
						<view class="u-flex u-flex-wrap group_3">
							<view class="flex-row u-flex-wrap w-full">
								<view class="flex-row items-center justify-center u-m-t-20" v-for="(item,i) in roomType"
									:key="i"
									:class="[decorationLevelId==item.dispositionTypeId?'text-wrapper':'text-wrapper_1',(i+1)%4==0?'':'u-m-r-15']"
									@click="clickItem(item.dispositionTypeId)"><text
										class="text_23">{{item.dispositionTypeName}}</text></view>

							</view>

						</view>
					</view>
					<view class="flex-col section_2">
						<view class="flex-row section_3">
							<text class="text_10">简装估算价</text>
							<text class="text_11">{{infos.estPrice+'万'}}</text>
						</view>
						<view class="flex-col group_6">
							<qiun-data-charts type="pie" :localdata="pies" :onmouse="false" :opts="{height:'260'}" />
						</view>
					</view>

					<view class="flex-col section_5" v-for="(item,i) in estDetailsList" :key="i">
						<view class="flex-col">
							<view class="flex-row group_11">
								<image
									src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b14c62d02982001153329a/16557867941336379202.png"
									class="image_1" />
								<text class="text_15">{{item.level1Name}}</text>
							</view>
							<view>
								<u-collapse accordion :border="false">
									<!-- <u-collapse-item title="设计师">
										<view class="justify-between group_18">
											<text class="text_25">一类品牌优等品</text>
											<text class="text_26">¥12～¥984</text>
										</view>
										<view class="justify-between group_19">
											<text class="text_27">一类品牌优等品</text>
											<text class="text_28">¥12～¥984</text>
										</view>
									</u-collapse-item>
									<u-collapse-item title="咨询顾问费（图审+预算+巡检等">
										<view class="justify-between group_18">
											<text class="text_25">一类品牌优等品</text>
											<text class="text_26">¥12～¥984</text>
										</view>
									</u-collapse-item> -->
									<view v-for="(val, k) in item.estDetails" :key="k">
										<u-collapse-item :title="val.level2Name">

											<view class="justify-between group_18"
												v-for="(values,leys) in val.estDetails " :key="leys">
												<text class="text_25">{{values.level3Name}}</text>
												<text class="text_26">¥{{values.price}}</text>
											</view>

										</u-collapse-item>
									</view>
								</u-collapse>

							</view>
						</view>
					</view>
					<!-- <view class="flex-col section_5">
						<view class="flex-col">
							<view class="flex-row group_11">
								<image
									src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b14c62d02982001153329a/16557867941336379202.png"
									class="image_1" />
								<text class="text_15">设计、咨询</text>
							</view>
							<view>
								<u-collapse accordion :border="false">
									<u-collapse-item title="设计师">
										<view class="justify-between group_18">
											<text class="text_25">一类品牌优等品</text>
											<text class="text_26">¥12～¥984</text>
										</view>
										<view class="justify-between group_19">
											<text class="text_27">一类品牌优等品</text>
											<text class="text_28">¥12～¥984</text>
										</view>
									</u-collapse-item>
									<u-collapse-item title="咨询顾问费（图审+预算+巡检等">
										<view class="justify-between group_18">
											<text class="text_25">一类品牌优等品</text>
											<text class="text_26">¥12～¥984</text>
										</view>
										
									</u-collapse-item>
								</u-collapse>
							</view>
						</view>
					</view> -->
					<!-- <view class="flex-col section_6">
						<view class="flex-col">
							<view class="flex-row group_11">
								<image
									src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b14c62d02982001153329a/16557867941336379202.png"
									class="image_1" />
								<text class="text_21">基础装修（半包）</text>
							</view>
							<u-collapse accordion :border="false">
								<u-collapse-item title="用工">
									<view class="justify-between group_18">
										<text class="text_25">一类品牌优等品</text>
										<text class="text_26">¥12～¥984</text>
									</view>
									
								</u-collapse-item>
								<u-collapse-item title="工艺标准">
									<view class="justify-between group_18">
										<text class="text_25">一类品牌优等品</text>
										<text class="text_26">¥12～¥984</text>
									</view>
									
								</u-collapse-item>
								<u-collapse-item title="辅材">
									<view class="justify-between group_18">
										<text class="text_25">一类品牌优等品</text>
										<text class="text_26">¥12～¥984</text>
									</view>
									
								</u-collapse-item>
							</u-collapse>
						</view>
					</view> -->
					<!-- <view class="flex-col section_5">
						<view class="flex-col">
							<view class="flex-row group_11">
								<image
									src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b14c62d02982001153329a/16557867941336379202.png"
									class="image_1" />
								<text class="text_15">主材（硬装饰面类）</text>
							</view>
							<u-collapse accordion :border="false">
								<u-collapse-item title="瓷砖">
									<view class="justify-between group_18">
										<text class="text_25">一类品牌优等品</text>
										<text class="text_26">¥12～¥984</text>
									</view>
									<view class="justify-between group_19">
										<text class="text_27">一类品牌优等品</text>
										<text class="text_28">¥12～¥984</text>
									</view>
								</u-collapse-item>
								<u-collapse-item title="岩版/石材">
									<view class="justify-between group_18">
										<text class="text_25">一类品牌优等品</text>
										<text class="text_26">¥12～¥984</text>
									</view>
									<view class="justify-between group_19">
										<text class="text_27">一类品牌优等品</text>
										<text class="text_28">¥12～¥984</text>
									</view>
								</u-collapse-item>
								
							</u-collapse>
						</view>
					</view> -->
				</view>

			</view>
		</scroll-view>
		<view class="u-p-l-20 u-p-r-20 fixed">
			<view class="flex-col items-center justify-center button"><text class="text_36"
					@click="save">保存并同步到我家总览</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		created() {
			this.getEstimate();

		},
		data() {
			return {
				pies: [],
				estDetailsDtoList: [],
				estimate: {},
				decorationLevelId: '',
				roomType: [],
				get_price: '',
				get_decorationLevelId: '',
				infos: {},
				estDetailsList: [],
			};
		},
		onLoad(e) {
			this.get_price = e.budget
			if (e.decorationLevelId) {
				this.decorationLevelId = e.decorationLevelId
			}
			if (e.decorationLevelId || this.get_price) {
				if (this.get_price > 0) {
					this.queryEst(this.decorationLevelId, this.get_price)
				} else {
					if (this.decorationLevelId) {

						this.queryEst(this.decorationLevelId, this.get_price)
					}
				}
				this.queryDecorationTypeList();
			} else {
				this.queryDecorationTypeList();
			}

		},
		methods: {
			clickItem(decorationLevelId) {
				console.log(decorationLevelId);
				this.decorationLevelId = decorationLevelId;
				this.queryEst(this.decorationLevelId)
			},
			// 获取装修档次文件
			queryDecorationTypeList() {
				this.$http('harryroom.queryDecorationTypeList').then(r => {
					if (r.code == 200) {
						this.roomType = r.data
						console.log('装修档次', r)
						if (r.data.length > 0) {
							if (!this.decorationLevelId) {
								this.decorationLevelId = r.data[0].dispositionTypeId;
								this.queryEst(this.decorationLevelId)
							}

						}

					} else {
						this.$u.toast(r.msg);
					}
				});
			},

			getEstimate() {
				// this.$http('estimate.queryEst').then(r => {
				// });
			},
			// 简装评估价格
			queryEst(decorationLevelId, budget = null) {
				var infos = {
					budget: budget,
					decorationLevelId: decorationLevelId,
				}
				if (budget > 0) {
					infos = {
						budget: budget,
						decorationLevelId: '',
					}
				}

				this.$http('harryroom.queryEst', infos).then(r => {
					if (r.code == 200) {
						console.log('图形', r)
						this.infos = r.data;
						let data = [];
						if (r.data.estDetailsDtoList.length > 0) {

							r.data.estDetailsDtoList.map(it => {

								data.push({
									text: it.text,
									value: parseInt(it.value, 10)
								})
							})

						}
						this.pies = data;

						this.estDetailsList = r.data.estDetailsList

						this.decorationLevelId = r.data.decorationLevelId
						console.log(this.estDetailsDtoList)
					} else {
						this.$u.toast(r.msg);
					}
				});
			},
			save() {
				let info = {
					// estId :  
					estId: '',
					projectId: this.infos.projectId,
					estPrice: this.infos.estPrice,
					cityId: this.infos.cityId,
					houseTypeId: this.infos.houseTypeId,
					decorationLevelId: this.decorationLevelId,
				}
				this.$http('harryroom.saveEst', info).then(r => {
					
					if (r.code == 200) {
						this.$u.toast(r.msg)
						this.$store.dispatch('setHomeIndex', 1)
						uni.switchTab({
							url: '/pages/index/index',
							success() {
								uni.$emit('update');
								
							}
						});
					} else {
						this.$u.toast(r.msg);
					}
				});
				// this.$store.dispatch('setHomeIndex', 1);
				// this.go('/pages/index/index');
			},

		},
	};
</script>

<style scoped lang="scss">
	/deep/ .u-icon__icon {
		font-size: 28rpx !important;
	}
	.scroll {
		height: calc(100vh - 200rpx);
	}

	.fixed {
		position: fixed;
		bottom: 40rpx;
		right: 0;
		left: 0;
	}

	::v-deep .u-cell__body {
		padding: 20rpx 0;
	}

	.section_5 {
		margin-top: 20rpx;
		padding: 29rpx 24rpx 41rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.image_1 {
		margin-top: 18rpx;
		width: 26rpx;
		height: 16rpx;
	}

	.group_11 {
		padding-bottom: 34rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.group_12 {
		padding-top: 30rpx;
	}

	.image_7 {
		margin-top: 16rpx;
		width: 22rpx;
		height: 12rpx;
	}

	.text-wrapper_1 {
		width: 152rpx;
		height: 64rpx;
		background: #F6F7F9;
		border-radius: 32rpx;
		opacity: 1;
	}

	.text_19 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_17 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_3 {
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.group_13 {
		margin-top: 39rpx;
	}

	.text_15 {
		margin-left: 12rpx;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.page {
		background-color: #f6f7f9ff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group {
		padding: 0 24rpx 48rpx;
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.group_1 {
		padding: 20rpx 0 48rpx;
	}

	.button {

		height: 86rpx;
		line-height: 86rpx;
		background-color: #1d6aff;
		border-radius: 44rpx;
	}

	.section_1 {
		padding: 29rpx 22rpx 32rpx 24rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.section_2 {
		margin-top: 20rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.section_6 {
		margin-top: 20rpx;
		padding: 29rpx 22rpx 34rpx 24rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.text_36 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.group_3 {
		margin-top: 42rpx;
	}

	.section_3 {
		padding: 29rpx 32rpx 35rpx;
		background-color: #ebf2ff;
		border-radius: 16rpx 16rpx 0px 0px;
	}

	.group_6 {
		margin-top: 60rpx;
		height: 500rpx;
		width: 100%
	}

	.group_15 {
		margin-top: 39rpx;
	}

	.group_16 {
		margin-top: 39rpx;
	}

	.group_21 {
		margin-top: 39rpx;
	}

	.group_22 {
		margin-top: 39rpx;
	}

	.group_23 {
		margin-top: 39rpx;
	}

	.group_24 {
		margin-top: 39rpx;
	}

	.text_1 {
		margin-left: 12rpx;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_23 {
		/* color: #5500ff; */
		font-size: 10rpx;
	}

	.group_5 {
		margin-top: 32rpx;
	}

	.text_10 {
		color: #191919;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_11 {
		margin-left: 13rpx;
		color: #1d6aff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_12 {
		align-self: flex-start;
		color: #1d6aff;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.group_7 {
		margin-top: -10.5rpx;
		position: relative;
	}

	.text_23 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_18 {
		margin-top: 30rpx;
	}

	.group_19 {
		margin-top: 23rpx;
	}

	.text_32 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_33 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_34 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_35 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text-wrapper {
		width: 152rpx;
		height: 64rpx;
		background: rgba(29, 106, 255, 0.1);
		border-radius: 32rpx;
		opacity: 1;
		border: 1px solid #1C62F9;
		color: #5500ff;
	}

	.text-wrapper_2 {
		margin-left: 16rpx;
		padding: 19rpx 0 17rpx;
		flex: 1 1 152rpx;
		background-color: #f6f7f9;
		border-radius: 32rpx;
		height: 64rpx;
	}

	.text-wrapper_3 {
		padding: 13rpx 0 23rpx;
		background-color: #f6f7f9;
		border-radius: 32rpx;
		width: 152rpx;
		height: 64rpx;
	}

	.text-wrapper_4 {
		margin-left: 16rpx;
		padding: 19rpx 0 17rpx;
		background-color: #f6f7f9;
		border-radius: 32rpx;
		width: 152rpx;
		height: 64rpx;
	}

	.text-wrapper_5 {
		margin-left: 16rpx;
		padding: 14rpx 0 22rpx;
		background-color: #f6f7f9;
		border-radius: 32rpx;
		width: 152rpx;
		height: 64rpx;
	}

	.group_8 {
		margin-right: 16rpx;
		width: 426rpx;
		position: relative;
	}

	.text_14 {
		color: #1d6aff;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
		position: absolute;
		right: 0;
		bottom: 41rpx;
	}

	.text_21 {
		margin-left: 12rpx;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_22 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_24 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_25 {
		margin-bottom: 6rpx;
		color: #666666;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_26 {
		margin-top: 6rpx;
		color: #666666;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_27 {
		margin-bottom: 6rpx;
		color: #666666;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_28 {
		margin-top: 6rpx;
		color: #666666;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_2 {
		color: #1d6aff;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_6 {
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_7 {
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_8 {
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_9 {
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.group_9 {
		padding-bottom: 16.5rpx;
		width: 282rpx;
		height: 211.5rpx;
		position: relative;
	}

	.text_13 {
		color: #1d6aff;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
		position: absolute;
		right: 0;
		top: 7.5rpx;
	}

	.image_3 {
		width: 64rpx;
		height: 38rpx;
		position: absolute;
		left: 0;
		top: 0;
	}

	.image_4 {
		width: 64rpx;
		height: 38rpx;
		position: absolute;
		right: 0;
		bottom: 16.5rpx;
	}

	.section_4 {
		background-image: repeating-linear-gradient(90deg, #1c62f9, #1c62f9 0%, transparent 0%, transparent 0%);
		width: 33rpx;
		height: 1rpx;
		position: absolute;
		right: 36rpx;
		top: 20.5rpx;
	}

	.image_5 {
		width: 200rpx;
		height: 200rpx;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}
</style>
